<script setup>
import Card from "../help/Card.vue";
import { EchartsOptions } from "../help/index.js";
import { nextTick,ref } from "vue";

const id = ref(Math.random().toString(36).substring(2, 9))

const data = ref([100, 93, 90, 93, 100, 80, 100,60,3, 90, 93,63, 90, 93, 60, 90, 93, 63, 90, 93,100, 93, 90, 93, 100, 80, 100,60,3, 90, 93,63, 90, 93, 60, 90, 93, 63, 90, 93,100, 93, 90, 93, 100, 80, 100,60,3, 90, 93,63, 90, 93, 60, 90, 93, 63, 90, 93, ])
const option = {
  tooltip: {

  },
  xAxis: {
    type: 'category',
    data: Array.from({length: 120}, (_,i) => i +1  ),
  },
  grid: {
    left: '10%',
    top: '20%',
    right: '0%',
    bottom: '20%',
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data.value,
      type: 'line',
      smooth: true
    },
    {
      data: data.value,
      type: 'line',
      smooth: true
    },
    {
      data: data.value,
      type: 'line',
      smooth: true
    },
    {
      data: data.value,
      type: 'line',
      smooth: true
    },
    {
      data: data.value,
      type: 'line',
      smooth: true
    },
    {
      data: data.value,
      type: 'line',
      smooth: true
    },
    {
      data: data.value,
      type: 'line',
      smooth: true
    }
  ]
}

nextTick(() => {
  EchartsOptions(option, id.value)
})

const onChange = () => {
  data.value = data.value.map(i => {
    if(i % 2){
      i += 1
    }else {
      i -= 1
    }
    return i
  })
  EchartsOptions(option, id.value)

}
const value = ref('1')
const options = ref([
  {label: '全部', value: '1'},
  { label: '一组',value:'2' },
  { label: '二组',value:'3' },
  { label: '三组',value:'4' },
  { label: '四组',value:'5' },
  { label: '五组',value:'6' },
  { label: '六组',value:'7' },
])
</script>

<template>
  <div class="w-full h-full">
    <Card class="w-full h-full" title="实时传感-最近两小时">
      <template #header>
        <el-select v-model="value" class="mr-10" placeholder="Select" @visible-change="onChange">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </template>
      <div class="w-full h-full" :id="id"></div>
    </Card>
  </div>
</template>
